<template>
	<view class="flex w100 s-center m-between" @click="openPopup">
		<view class="content"> {{selectedList.length > 0 ? selectedList.map(item => item.text).join(',') : '请选择'}} </view>
		<u-icon name="arrow-right" color="#2979ff" size="20"></u-icon>
	</view>
	<u-popup :show="show" @close="closePopup" @open="open" mode="right" :customStyle="{width: '400rpx'}">
		<view class="p-10">
			<u-search v-model="keyWords" shape="round" :showAction="false"></u-search>
		</view>
		<view class="p-10" style="width: 200rpx;">
			<u-button text="重置" shape="circle" @click="resert"></u-button>
		</view>
		<view class="popup-list">
			<scroll-view style="max-height: 1000rpx;" scroll-y="true">
				<view class="p-10" v-for="(item,index) in listData" :index="index" @click="onChange(item, index)">
					<view class="flex">
						<view class="">
							{{item.text}}
						</view>
						<u-icon name="checkbox-mark" v-show="item.selected" color="#2979ff" size="20"></u-icon>
					</view>
					<u-line></u-line>
				</view>
			</scroll-view>
		</view>
	</u-popup>
</template>
<script setup>
	import {
		computed,
		unref,
		ref,
		watch
	} from 'vue'
	import _camelCase from 'lodash/camelCase';
	import _cloneDeep from 'lodash/cloneDeep'
	import Dict from '@/store/dict.js'
	import Com from '@/store/com.js'
	const store = {
		com: Com(),
		dict: Dict()
	}
	const emits = defineEmits(['update:modelValue']);
	const props = defineProps({
		modelValue: {},
		list: {
			type: Array,
			default: () => [],
		},
		fileType: {
			type: Object,
			default: () => ({
				label: 'dictLabel',
				value: 'dictValue'
			}),
		},
		multiple: {
			type: Boolean,
			default: true
		},
		type: {
			type: String,
			default: '',
		},
	});
	let dictType = computed(() => (props.type?.startsWith?.('GET') ? props.type : `GET${_camelCase(props.type)}`)),
		show = ref(false),
		listData = ref([]),
		data = ref([]), // 总数据
		copyData = ref([]), // 拷贝总数据
		selectValue = ref([]), // 存储选中值-id
		selectedList = ref([]) // 存储选中列表-{}
	const openPopup = () => {
		show.value = true
	}
	const closePopup = () => {
		show.value = false
	}
	const initFn = () => {
		if (unref(dictType)) {
			(store.dict[unref(dictType)] || store.com[unref(dictType)])?.();
		} else {
			initialization();
		}
	}
	const initialization = (list = props.list) => {
		listData.value = data.value = copyData.value = fileTypeFn(list);
	}
	/**
	 * 数据处理
	 * @param {[]} data 原始数据
	 * @param {} fileType 处理{ label: 'dictLabel', value: 'dictValue' }对象
	 */
	const fileTypeFn = (data, fileType = props.fileType) => {
		return data.map((val, i) => {
			const obj = {
				text: val[fileType.label],
				value: val[fileType.value],
			};
			return obj
		});
	}
	const onChange = (curItem, curIndex) => {
		// 是否已选中
		listData.value.forEach((_item, _index) => {
			if (curIndex === _index) {
				if (unref(selectValue).includes(_item.value)) {
					_item.selected = false
					selectValue.value.splice(unref(selectValue).findIndex(i => i === _item.value), 1)
					selectedList.value.splice(unref(selectedList).findIndex(j => j.value === _item.value), 1)
				} else {
					_item.selected = true
					if (!props.multiple) {
						selectValue.value = []
						selectedList.value = []
					}
					selectValue.value.push(_item.value)
					selectedList.value.push({
						text: _item.text,
						value: _item.value,
					});
				}
			} else if (!props.multiple) {
				_item.selected = false
			}
		})
	}
	// 重置选中项
	const resert = () => {
		selectedList.value = []
		selectValue.value = []
		listData.value.forEach(item => {
			if (item.selected) {
				item.selected = false
			}
		})
	}
	watch(() => selectValue.value, (val) => {
		emits('update:modelValue', props.multiple ? val : val.join());
	}, {
		deep: true,
	})
	let keyWords = ref('')
	watch(() => keyWords.value, (val) => {
		if (val) {
			listData.value = unref(copyData).filter(item => item.text.includes(val))
		} else {
			listData.value = unref(copyData)
		}
	})
	// 监听数据变化
	watch(
		() => props.list,
		(val) => {
			if (val) initialization(val);
		}, {
			deep: true,
			immediate: true
		});
	watch(() => dictType.value,
		(val) => {
			initFn(val);
		}, {
			immediate: true
		})
	watch(
		() => store.dict[unref(dictType)?.replace('GET', '')] || store.com[unref(dictType)?.replace('GET', '')],
		(val) => {
			if (unref(dictType)) initialization(val);
		}, {
			deep: true,
			immediate: true
		});
</script>
<style scoped lang="scss">
</style>